<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的预约 - 迈浪心理</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="user-center.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <svg width="160" height="40" viewBox="0 0 160 40">
                    <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                        stroke-width="2" />
                    <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#333">迈浪心理</text>
                </svg>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-item" @click="goToPage('index')">网站首页</a>
                <a href="consultation.html" class="nav-item" @click="goToPage('consultation')">心理咨询</a>
                <a href="therapist.html" class="nav-item" @click="goToPage('therapist')">心理咨询师</a>
                <a href="about.html" class="nav-item" @click="goToPage('about')">关于我们</a>
                <a href="user-center.html" class="nav-item" @click="goToPage('user-center')">个人中心</a>
                <a href="#" class="nav-item login-btn">登录</a>
            </nav>
        </header>

        <main class="user-main">
            <div class="container">
                <div class="user-layout">
                    <!-- 侧边导航 -->
                    <aside class="user-sidebar">
                        <div class="user-card">
                            <img :src="user.avatar" :alt="user.name" class="user-avatar">
                            <h3>{{ user.name }}</h3>
                            <p>{{ user.email }}</p>
                        </div>
                        <nav class="user-nav">
                            <a href="user-center.html" class="nav-item">
                                <span class="nav-icon">👤</span>
                                <span>个人中心</span>
                            </a>
                            <a href="user-appointments.html" class="nav-item active">
                                <span class="nav-icon">📅</span>
                                <span>我的预约</span>
                            </a>
                            <a href="user-records.html" class="nav-item">
                                <span class="nav-icon">📝</span>
                                <span>咨询记录</span>
                            </a>
                        </nav>
                    </aside>

                    <!-- 主内容区 -->
                    <div class="content-main">
                        <div class="content-header">
                            <h2>我的预约</h2>
                            <div class="filter-bar">
                                <select v-model="statusFilter">
                                    <option value="all">全部状态</option>
                                    <option value="pending">待进行</option>
                                    <option value="completed">已完成</option>
                                    <option value="cancelled">已取消</option>
                                </select>
                            </div>
                        </div>

                        <div class="appointments-list">
                            <div v-for="appointment in filteredAppointments" :key="appointment.id"
                                class="appointment-card">
                                <div class="appointment-header">
                                    <div class="therapist-info">
                                        <img :src="appointment.therapistAvatar" :alt="appointment.therapistName">
                                        <div class="info">
                                            <h3>{{ appointment.therapistName }}</h3>
                                            <p>{{ appointment.therapistTitle }}</p>
                                        </div>
                                    </div>
                                    <span :class="['status-tag', appointment.status]">
                                        {{ appointment.statusText }}
                                    </span>
                                </div>
                                <div class="appointment-details">
                                    <div class="detail-item">
                                        <span class="label">预约时间：</span>
                                        <span>{{ appointment.date }} {{ appointment.time }}</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="label">咨询方式：</span>
                                        <span>{{ appointment.type }}</span>
                                    </div>
                                    <div class="detail-item">
                                        <span class="label">咨询地点：</span>
                                        <span>{{ appointment.location }}</span>
                                    </div>
                                </div>
                                <div class="appointment-actions" v-if="appointment.status === 'pending'">
                                    <button class="action-btn cancel-btn" @click="cancelAppointment(appointment)">
                                        取消预约
                                    </button>
                                    <button class="action-btn reschedule-btn"
                                        @click="rescheduleAppointment(appointment)">
                                        改期
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <script src="js/user-appointments.js"></script>
</body>

</html>